<template>
  <div v-if="checkPermission('billlistdataview')" class="dashboard-container">

    <el-row :gutter="24">

      <el-col :xs="24" :sm="12" style="margin-top: 10px; cursor: pointer;" :lg="6" v-for="(item, _index) in mainMetrics"
        :key="JSON.stringify(mainMetrics)">
        <el-card shadow="hover" class="stat-card hover-animation">
          <div class="card-content">
            <div class="metric-header">
              <span class="metric-icon" :style="{ background: item.color }">
                <el-icon color="#fff">
                  <component :is="item.iconComponent" />
                </el-icon>
              </span>
              <h3 class="title">{{ item.title }}</h3>
            </div>
            <p class="number">{{ item.value }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top:24px;">
      <el-col :span="24">
        <el-card shadow="hover" class="chart-card">
          <div class="chart-header">
            <h4 class="chart-title">客户产品销量Top10</h4>
            <!-- <el-tag type="info" size="small">周同比 ↑12%</el-tag> -->
          </div>
          <div class="chart-container" style="height: 300px;width: 100%;">
            <BarChart :data="activeData" color="#6a8cff" />
          </div>
        </el-card>

      </el-col>

      <!-- 右侧图表结构类似 -->
    </el-row>
    <!-- 图表区域 -->
    <el-row :gutter="24" style="margin-top:14px;">
      <el-col style="margin-top: 10px;" :xs="24" :sm="12">
        <el-card shadow="hover" class="chart-card">
          <div class="chart-header">
            <h4 class="chart-title">供应商货款占比</h4>
            <!-- <el-tag type="info" size="small">周同比 ↑12%</el-tag> -->
          </div>
          <div class="chart-container">

            <div class="chart-container" style="height: 300px;">
              <PieChart :key="JSON.stringify(supplierpieData)" :data="supplierpieData" />
            </div>

          </div>
        </el-card>

      </el-col>
      <el-col style="margin-top: 10px;" :xs="24" :sm="12">
        <el-card shadow="hover" class="chart-card">
          <div class="chart-header">
            <h4 class="chart-title">客户货款额占比</h4>
            <!-- <el-tag type="info" size="small">周同比 ↑12%</el-tag> -->
          </div>
          <div class="chart-container">

            <div class="chart-container" style="height: 300px;">
              <PieChart :key="JSON.stringify(userpieData)" :data="userpieData" />
            </div>



          </div>
        </el-card>

      </el-col>
      <!-- 右侧图表结构类似 -->
    </el-row>



  </div>

  <div v-else class="welcome-page">
    <!-- 修改欢迎语 -->
    <h1 class="welcome-title">
      欢迎使用{{ Vname }}<br>
      <span class="welcome-subtitle">一站式高效管理解决方案，助力企业蓬勃发展！</span>
    </h1>

    <!-- 新增功能卡片区域 -->
    <el-row :gutter="20" class="feature-cards">
      <el-col :span="6" v-for="(feature, index) in features" :key="index">
        <el-card shadow="hover" class="feature-card">
          <div class="card-content">
            <el-icon :color="feature.color" class="feature-icon">
              <component :is="feature.icon" />
            </el-icon>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>




</template>

<script setup lang="ts">
import { ref } from 'vue'
import { homeData } from '@/api/order'
import currency from 'currency.js'
import BarChart from '@/components/BarChart.vue'
import { checkPermission } from "@/utils/common";

// 在脚本部分添加图标引入
import {
  User,
  Document,
  Wallet,
  DataLine
} from '@element-plus/icons-vue'

const Vname = import.meta.env.VITE_NAME

// 新增功能数据
const features = [
  {
    icon: 'BellFilled',
    color: '#409EFF',
    title: '实时监控',
    description: '系统提供实时数据监控看板，关键指标即时掌握'
  },
  {
    icon: 'Lock',
    color: '#67C23A',
    title: '安全可靠',
    description: '多重权限验证机制，保障企业数据安全'
  },
  {
    icon: 'TrendCharts',
    color: '#E6A23C',
    title: '智能分析',
    description: '内置数据分析模型，业务趋势一目了然'
  },
  {
    icon: 'SetUp',
    color: '#F56C6C',
    title: '灵活配置',
    description: '模块化功能设计，支持个性化需求定制'
  }
]
// 新增示例数据
const activeData = ref([

])
const userpieData = ref([])
const supplierpieData = ref([])
// const value = ref('客户')
const init = () => {
  homeData().then(res => {
    mainMetrics.value[0].value = currency(res.data.totalBillAmount[0].totalAmount, { precision: 0, symbol: '¥' }).format();
    mainMetrics.value[1].value = currency(res.data.totalSupplierAmount[0].totalAmount, { precision: 0, symbol: '¥' }).format();
    mainMetrics.value[2].value = res.data.totalBillNum;
    mainMetrics.value[3].value = res.data.totalSupplierNum;
    activeData.value = res.data.billProductTop10.map((e: any) => {
      return {
        name: e.productName,
        value: e.totalSold
      }
    });
    userpieData.value = res.data.userPieChartData;
    supplierpieData.value = res.data.supplierPieChartData
  })
}
init()
// const options = ['客户', '供应商']

// 主要指标数据重构

// 修改mainMetrics数据结构
const mainMetrics = ref([
  {
    title: '客户总货款',
    value: '0',
    iconComponent: User,  // 直接使用组件引用
    color: '#6a8cff',
  },
  {
    title: '供应商总货款',
    value: '0',
    iconComponent: Document,
    color: '#7bc79d',
  },
  {
    title: '系统客户账单数',
    value: '0',
    iconComponent: Wallet,
    color: '#ff9f7b',

  },
  {
    title: '系统供应商账单数',
    value: '0',
    iconComponent: DataLine,
    color: '#b78cff',
  }
]) 
</script>

<style scoped>
/* 新版配色方案 */
.dashboard-container {
  padding: 0 24px;
  background: #f8fafc;
}

/* 统计卡片 */
.stat-card {
  border-radius: 12px;
  border: none;
  transition: transform 0.2s ease;
}

.hover-animation:hover {
  transform: translateY(-4px);
}

.metric-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  /* 更柔和的圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  transition: all 0.3s ease;
  /* 添加过渡动画 */
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    /* 内阴影增加立体感 */
    0 2px 8px rgba(106, 140, 255, 0.2);
  /* 外阴影增强层次 */
  position: relative;

}

.metric-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 60%);
  /* 添加微妙渐变效果 */
}

/* 添加悬停动画效果 */
.stat-card:hover .metric-icon {
  transform: scale(1.05);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(106, 140, 255, 0.3);
}

/* 调整图标大小 */
.metric-icon i {
  font-size: 1.2em;
  /* 适当放大图标 */
  transition: transform 0.3s ease;
}

.title {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.number {
  font-size: 28px;
  font-weight: 600;
  color: #1e293b;
  margin: 8px 0;
}

.compare {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.compare.negative {
  color: #ef4444;
}

/* 图表卡片 */
.chart-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 0;
}

.chart-title {
  color: #475569;
  font-weight: 500;
  position: relative;
  padding-left: 12px;
}

.chart-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #6a8cff;
  border-radius: 2px;
}

/* 表格样式 */
.stripe-table {
  border-radius: 12px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.table-header-cell {
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 500;
}

.table-row-cell {
  transition: background 0.2s ease;
}

.table-row-cell:hover {
  background: #f8fafc !important;
}

/* 保持原有基础样式 */
.welcome-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
  padding: 40px 20px;
  /* 新增内边距 */
}

/* 优化欢迎语样式 */
.welcome-title {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
  display: block;
  font-size: 24px;
  font-weight: normal;
  color: #666;
  margin-top: 10px;
}

/* 新增卡片样式 */
.feature-cards {
  max-width: 1200px;
  margin: 40px auto;
}

.feature-card {
  margin-bottom: 20px;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }
}

.card-content {
  text-align: center;
  padding: 20px;
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 15px;
}

.feature-title {
  color: #303133;
  margin: 10px 0;
  font-size: 18px;
}

.feature-desc {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}
</style>